<template>
  <div>
    <!-- <div class="img_top">
      <yd-lightbox :num="imagelist.length">
        <yd-lightbox-img v-for="(item, index) in imagelist" :key="index" :src="item.src" class="img_top_img"></yd-lightbox-img>
      </yd-lightbox>
    </div> -->

    <yd-lightbox :num="imagelist.length">
        <div style="width:100%;height:200px; overflow-y:hidden">
        <yd-lightbox-img v-for="(item, index) in imagelist" :key="index" :src="item.src" style="width:100%;height:200px"></yd-lightbox-img>
        </div>
        <div class="imgnum">
            <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{imagelist.length}}
        </div>
      </yd-lightbox>
    <div class="score_style">
      <span class="num_style">{{pingjunfen.average}}</span>
      <br>
      <span class="text_evaluate">非常棒</span>
    </div>
    <div class="date_style" @click = "openByDialog" :value = "calendar4.display">
      <yd-cell-item arrow>
          <div slot="left" class="check_in"><span class="font-color">入店</span> {{monthstart}}月{{daystart}}日</div>
          <div slot="left" class="check_out"><span class="font-color">离店</span> {{monthend}}月{{dayend}}日</div>
          <div slot="right">共{{daynum}}晚</div>
      </yd-cell-item>                                
    </div>
    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
      <div class="room_type" v-for="item in list" :key="item.index"  slot="list">
        <yd-flexbox>
          <div style="width:40%;height:120px;">
            <img :src="item.top_pic" class="room_type_img">
          </div>
          <div style="width:40%;height:120px;">
            <div class="room_type_title">{{item.name}}</div>
            <div class="room_type_price">￥{{item.lowGuidePrice/100}}元</div>
          </div>
          <div style="width:20%;height:120px;">
              <div class="no-book" v-if="item.include==='none'">不可预订</div>
              <div class="no-book" v-if="item.include==='part'">部分可订
              </div>
              <div class="books" v-if="item.include==='part'">
                <yd-button size="small" type="hollow" @click.native="bookTicket(item)">预订</yd-button>
              </div>
              <div class="no-book" v-if="item.include==='all'">可预订
              </div>
              <div class="books" v-if="item.include==='all'">
                <yd-button size="small" type="hollow" @click.native="bookTicket(item)">预订</yd-button>
              </div>
          </div>
        </yd-flexbox>
      </div>
      <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
    <!-- 显示日历 -->
    <div>
      <transition name = "fade">
        <div class = "calendar-dialog" :style = "{'left':calendar4.left  +  'px','top':calendar4.top  +  'px'}" v-if = "calendar4.show" >
          <div class = "calendar-dialog-mask" @click = "closeByDialog"></div>
          <div class = "calendar-dialog-body">
            <calendar :range = "calendar4.range" :zero = "calendar4.zero" :lunar = "calendar4.lunar" :value = "calendar4.value"  @select = "calendar4.select"></calendar>
          </div>
        </div>
        <!-- <div class = "calendar-dialog-body" :style = "{'left':calendar4.left   +   'px','top':calendar4.top   +   'px'}" v-if = "calendar4.show">
            <calendar :zero = "calendar4.zero" :lunar = "calendar4.lunar" :value = "calendar4.value" :begin = "calendar4.begin" :end = "calendar4.end" @select = "calendar4.select"></calendar>
        </div> -->
      </transition>
    </div>

  </div>  
</template>
<script>
import calendar from './calendar.vue';

export default {
  name: 'online_booking',
  components: {
    calendar
  },
  data() {
    return {
      list: [],
      imagelist: [],
      outdata: '',
      pingjunfen: '',
      place_code: '',
      pageSize: '5',
      pageNo: '1',
      yearstart: '',
      monthstart: '',
      daystart: '',
      yearend: '',
      monthend: '',
      dayend: '',
      daynum: '',
      datestart: '',
      dateend: '',
      checkindate: [],
      checkoutdate: [],
      imagearr: [],
      cancelDate: {},
      checkindate1: '',
      checkoutdate1: '',
      calendar4: {
        display: '',
        show: false,
        range: true,
        zero: true,
        value: [], // 默认日期
        lunar: true, // 显示农历
        select: (begin, end) => {
          console.log(begin, end)
          this.calendar4.show = false;
          this.calendar4.value = [begin, end];
          this.calendar4.display = begin.join('/') + ' ~ ' + end.join('/');
          this.yearstart = begin[0];
          this.monthstart = begin[1];
          this.daystart = begin[2];
          this.yearend = end[0];
          this.monthend = end[1];
          this.dayend = end[2];
          if (this.yearstart === this.yearend && this.monthstart === this.monthend && this.daystart === this.dayend) {
            this.$dialog.toast({mes: '请选择离店日期!'})
            this.date = new Date();
            this.yearstart = this.date.getFullYear();
            this.monthstart = this.date.getMonth() + 1;
            this.daystart = this.date.getDate();
            this.yearend = this.date.getFullYear();
            this.monthend = this.date.getMonth() + 1;
            this.dayend = this.date.getDate() + 1;
            console.log(this.calendar4.begin.join('/'));
            console.log('123');
            console.log(new Date(this.calendar4.begin));
            this.datestart = new Date(this.calendar4.begin.join('/')).getTime();
            this.dateend = new Date(this.calendar4.end.join('/')).getTime();
            alert((parseInt(this.dateend) - parseInt(this.datestart)) + '---' + ((parseInt(this.dateend) - parseInt(this.datestart)) / (1000 * 60 * 60 * 24)) + '----' + parseInt((parseInt(this.dateend) - parseInt(this.datestart)) / (1000 * 60 * 60 * 24)));
            this.daynum = parseInt((parseInt(this.dateend) - parseInt(this.datestart)) / (1000 * 60 * 60 * 24));
            this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
            this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
            this.checkindate1 = this.checkindate;
            this.checkoutdate1 = this.checkoutdate;
          } else {
            this.datestart = new Date(begin.join('/')).getTime();
            this.dateend = new Date(end.join('/')).getTime()
            this.daynum = parseInt((this.dateend - this.datestart) / (1000 * 60 * 60 * 24));
            // console.log(this.daynum);
            this.$router.push({path: 'online_booking', query: {yearstart: this.yearstart, monthstart: this.monthstart, daystart: this.daystart, yearend: this.yearend, monthend: this.monthend, dayend: this.dayend, daynum: this.daynum, id: this.$route.query.id}});
            this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
            this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
            this.checkindate1 = this.checkindate;
            this.checkoutdate1 = this.checkoutdate;
            // console.log(this.checkindate)
            location.reload();
          }
        }
      }
    }
  },
  mounted: function() {
    this.date = new Date()
    this.calendar4.begin = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate()];
    this.calendar4.end = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate() + 1];
    // console.log('!!!!!!!!!!!!!' + this.$route.query.daystart)
    if (this.$route.query.daystart === undefined) {
      this.yearstart = this.date.getFullYear();
      this.monthstart = this.date.getMonth() + 1;
      this.daystart = this.date.getDate();
      this.yearend = this.date.getFullYear();
      this.monthend = this.date.getMonth() + 1;
      this.dayend = this.date.getDate() + 1;
      this.datestart = new Date(this.calendar4.begin.join('/')).getTime();
      this.dateend = new Date(this.calendar4.end.join('/')).getTime()
      this.daynum = parseInt((this.dateend - this.datestart) / (1000 * 60 * 60 * 24));
      this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
      this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
      this.checkindate1 = this.checkindate;
      this.checkoutdate1 = this.checkoutdate;
      // console.log('=====' + this.checkindate)
    } else {
      this.yearstart = this.$route.query.yearstart;
      this.monthstart = this.$route.query.monthstart;
      this.daystart = this.$route.query.daystart;
      this.yearend = this.$route.query.yearend;
      this.monthend = this.$route.query.monthend;
      this.dayend = this.$route.query.dayend;
      this.daynum = this.$route.query.daynum;
      this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
      this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-')
      this.checkindate1 = this.checkindate;
      this.checkoutdate1 = this.checkoutdate;
      // console.log('======' + this.checkindate)
    }
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getInfo,
        data: {
          type: 'H',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.sub_place;
          this.place_code = resultData.data.sub_place.place_code
          this.imagearr = resultData.data.sub_place.pictures_arr.split(',');
          this.imagearr.forEach(function(element) {
            var imagelist = {};
            imagelist['src'] = element;
            this.imagelist.push(imagelist);
          }, this);
          // console.log(this.list);
          this.hdAjax({
            url: this.API.findDatedProductList,
            data: {
              pageSize: this.pageSize,
              pageNo: this.pageNo,
              place_code: this.place_code,
              checkindate: this.checkindate1,
              checkoutdate: this.checkoutdate1,
              state: '1'
            },
            success: (resultData) => {
              const _list = resultData.data.results;
              this.list = [...this.list, ..._list];
              if (_list.length < this.pageSize) {
                /* 所有数据加载完毕 */
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                return;
              }
              /* 单次请求数据完毕 */
              this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
              this.pageNo++;
            }
          });
        }
      });
      this.hdAjax({
        url: this.API.findAverage,
        data: {
          // type: 'J',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.pingjunfen = resultData.data;
        }
      });
    },
    openByDialog() {
      // console.log('你奶奶的啊!!!')
      this.calendar4.show = true;
      // this.calendar4.left = e.target.offsetLeft;
      // console.log(this.calendar4.left);
      // this.calendar4.top = e.target.offsetTop;
      // e.stopPropagation();
      // window.setTimeout(() => {
      //   document.addEventListener('click', (e) => {
      //     this.calendar4.show = false;
      //     document.removeEventListener('click', () => {}, false);
      //   }, false);
      // }, 1000)
    },
    closeByDialog() {
      // console.log('你奶奶的啊!!!')
      this.calendar4.show = false;
    },
    bookTicket(item) {
      // alert('~~~');
      this.$router.push({path: '/liveorder', query: {place_code: this.outdata.place_code, name: item.name, guide_price: item.guide_price, sale_code: item.code, checkindate: this.checkindate, checkoutdate: this.checkoutdate}})
    }
  }
}
</script>

<style scoped>
 .img_top_img{
   height: 250px;
   width:100%;
 }
 .score_style{
   margin-top:10px;
   margin-bottom:10px;
   color:orange;
 }
 .num_style{
   font-size:.5rem;
   margin-left:5%;
 }
 .text_evaluate{
   font-size:.25rem;
  margin-left:5%;
 }
 .check_in{
   width: 50%;
   margin-left: 5px;
   padding-right: 5px;
   border-right: 1.5px solid #999999;
 }
 .date_style{
   border-top: 10px solid #F0F0F0;
   border-bottom: 10px solid #F0F0F0;
 }
 .check_out{
   padding-left: 5px;
 }
 .font-color{
   color:#999999;
 }
 .room_type{
   border-bottom: 1px solid #F0F0F0;
   height: 120px;
   width: 100%;
 }
 .room_type_img{
   float:left;
   height:120px;
   width:100%;
   padding: 5px 5px 5px 5px;
   /* margin-left: 10px;
   margin-top: 10px;
   margin-bottom: 10px; */
 }
 .room_type_title{
   height: 60px;
   font-size:.4rem;
   padding: 10px 5px 5px 5px;
 }
 .room_type_price{
   height: 60px;
   font-size:.3rem;
   color:orange;
   padding: 10px 5px 5px 5px;
 }
 .no-book{
   height: 60px;
   float:right;
   text-align:center;
   font-size:.3rem;
   color: #999999;
   width: 100%;
   padding: 10px 5px 5px 5px;
  }
  .books{
   height: 60px;
   float:right;
   text-align:center;
   font-size:.3rem;
   color: #999999;
   width: 100%;
   padding: 10px 5px 5px 5px;
  }
 /*弹出框*/
.calendar-dialog {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

/*下拉框*/
.calendar-dropdown {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
  width: 100%;
}
.calendar-dropdown:before {
  position: absolute;
  left: 30px;
  top: -10px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #dedede;
}
.calendar-dropdown:after {
  position: absolute;
  left: 30px;
  top: -9px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #fff;
}

.calendar-dialog-mask {
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
}

.calendar-dialog-body {
  background: #fff;
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
  width: 100%
}
/*transition*/
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}
.imgnum{
  float:right;
  margin-right: 10px;
  margin-top: -28px;
  color:#ffffff;
  position: relative;
  background-color: #333333;
  background-color:rgba(0,0,0,0.6);
  /* border: 3px solid #333333; */
  border-radius: 18px;
  width: 45px;
  height: 20px; 
  text-align:center
}
</style>


